<template>
	<view class="viewcontent">
		<view class="viewcontenthead">
			<view class="fl" @click="$UTILS.goBack(1)"></view>
			<view class="fr" style="color: #fdf5fa;"> 箱信息绑定</view>
			<view class="leftitem" ></view>
		</view>
		<view class="viewcontenmes">
			<view class="searchitem">
				<view class="easyinputmes"><uni-easyinput  v-model="value"  placeholder="请输入内容" @input="input"></uni-easyinput></view>
				<view class="easyinputimg" ><image  @click="searchdemo" src="../../../static/Search.svg" style="height:52rpx;width: 52rpx;" ></image></view>
			</view>
			<view class="listitem">
				<view class="lists" v-for="(item,index) in this.itemlist" :key="index">
					<view class="listsleft" >
						<view class="mesindex">序号：{{index+1}}</view>
						<view class="mesname"><view>物资名称：{{item.boxName}}</view></view>
						<view class="mescode"><view>物资编码：{{item.boxCode}}</view></view>
					</view>
					<view class="listsright">
						<u-button  @click="setbind(item,index)">绑定</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.init()
		},
		data() {
			return {
				itemlist:[],
				value:''
			};
		},
		methods:{
			async searchdemo(){
				let [error, res] = await  this.$UTILS.requestRest(this.$COMMON.REST_URL.BOXLIST, 'GET')
				if (res.data?.code == 401) {
					let jqdizhi = this.$UTILS.getunlinelogin()
					let ictdizhi = this.$UTILS.getunlineaddress()
					uni.clearStorageSync()
					this.$UTILS.setunlinelogin(jqdizhi);
					this.$UTILS.setunlineaddress(ictdizhi);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/view-layout/login/login',
						});
					}, 500)
					
					this.$UTILS.toast('token过期，请从新登录')
					return
				}
				if(this.value == ''){
					this.itemlist  = res.data.result
					return
				}
				this.itemlist = res.data.result.filter(item=>{
					if(item.boxName){
						return item.boxName.includes(this.value)
					}
					
				})
			},
			async init(){
				let [error, res] = await  this.$UTILS.requestRest(this.$COMMON.REST_URL.BOXLIST, 'GET')
				if (res && res.statusCode == 200) {
					if (res.data?.code == 401) {
						let jqdizhi = this.$UTILS.getunlinelogin()
						let ictdizhi = this.$UTILS.getunlineaddress()
						uni.clearStorageSync()
						this.$UTILS.setunlinelogin(jqdizhi);
						this.$UTILS.setunlineaddress(ictdizhi);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/view-layout/login/login',
							});
						}, 500)
						
						this.$UTILS.toast('token过期，请从新登录')
						return
					}
					this.itemlist   = res.data.result
				}else{
					this.$UTILS.toast('请求失败')
					return
				}
				
				
			},
			async setbind(item,index){
				
				let [error, res] = await  this.$UTILS.requestRest(this.$COMMON.REST_URL.SUPPLIESBOXID+`/${item.boxId}`, 'GET')
				if (res.data?.code == 401) {
					let jqdizhi = this.$UTILS.getunlinelogin()
					let ictdizhi = this.$UTILS.getunlineaddress()
					uni.clearStorageSync()
					this.$UTILS.setunlinelogin(jqdizhi);
					this.$UTILS.setunlineaddress(ictdizhi);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/view-layout/login/login',
						});
					}, 500)
					
					this.$UTILS.toast('token过期，请从新登录')
					return
				}
				let demo = JSON.stringify(res.data.result.equipmentList)
				
				if(res.statusCode == 200 && res.data.result){
					uni.navigateTo({
						url:`/pages/view-working/boxgroupBind/boxgroupBind?demo=${demo}&boxId=${item.boxId}`
					})
				}else{
					this.$UTILS.toast('数据获取失败')
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
.viewcontent{
	 display: flex;
	 flex-direction: column;
	 width: 100%;  
	 height: 100vh; 
	 box-sizing: border-box;
	 padding-top: 55rpx;
	  .viewcontenthead{
	  		 width: 100%;
	  		 height: 5%;
	  		 display: flex;
	  		 justify-content: space-between;
	  		 align-items: center;
	  		 .fl{
	  			 width: 100rpx;
	  			 height: 10vh;
	  			 line-height: 10vh;
	  			 background: url("/static/right-arrow.png") no-repeat center;
	  			 background-size: 14%;
	  			 transform: rotate(180deg);
	  			 cursor: pointer; // 增加鼠标指针样式
	  		 }
	  		 .fr{
	  			 cursor: pointer; // 增加鼠标指针样式
	  		 }
	  		 .leftitem{
	  			 width: 100rpx;
	  			 display: flex;
	  			 justify-content: center;
	  			 z-index: 999;
	  		 }
	    } 
		.viewcontenmes{
				 width: 100%;
				 height: 95%;
				 ::v-deep .uni-input-input{
				 	 color:rgba(250, 249, 249, 0.8) !important;
				 }
				 .searchitem{
					 width: 100%;
					 height: 10%;
					 display: flex;
					 flex-direction: row;
					 align-items: center;
					 justify-content: space-between;
					 .easyinputmes{
						 width: 660rpx;
						 box-sizing: border-box;
						 padding: 0 25rpx;
					 }
					 .easyinputimg{
						 width: 80rpx;
					 }
				 }
				 
				 .listitem{
					 width: 99%;
					 height: 90%;
					 margin: 5rpx auto;
					 box-sizing: border-box;
					 overflow: auto;
					 box-sizing: border-box;
					 padding: 0 5rpx;
					 font-family:PingFang SC;
					 font-weight:550;
					 color:rgba(250, 249, 249, 0.8);
					 font-size:16px;
					 .lists{
						 width: 99%;
						 height: 200rpx;
						 margin: 8rpx auto;
						 border: 1px solid white;
						 border-radius: 15px;
						 display: flex;
						 flex-direction: row;
						 .listsleft{
							 width: 70%;
							 height: 100%;
							 .mesindex{
								 width: 100%;
								 height: 33%;
								 box-sizing: border-box;
								 padding-left: 18rpx;
								 display: flex;
								 align-items: center;
							 }
							 .mesname{
							 	 width: 100%;
							 	 height: 33%;
								 box-sizing: border-box;
								 padding-left: 18rpx;
								 display: flex;
								 align-items: center;
								 view{
									 text-overflow: ellipsis;
									 white-space: nowrap;
									 overflow: hidden;
								 }
							 }
							 .mescode{
							 	width: 100%;
							 	height: 33%;
								box-sizing: border-box;
								padding-left: 18rpx;
								display: flex;
								align-items: center;
								view{
									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
								}
							 }
						 }
						 .listsright{
							 width: 30%;
							 height: 100%;
							 display: flex;
							 align-items: center;
							 box-sizing: border-box;
							 padding-right: 28rpx;
						 }
					 }
				 }
				 
			}
	}
</style>
